<style type="text/css">
  .box_search{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    width:470px;
    height:220px;
    background-color:#fbab34;
    padding: 10px;
    color:#FFF;
    font-size:16px;
    text-shadow: 0.05em 0.05em 0.05em #333;
    margin:0 0 20px 0px;
  }

  .search{
    -webkit-border-radius: 05px;
    -moz-border-radius: 05px;
    border-radius: 05px;
    border:none;
    width:400px;
    height:25px;
    border: 1px solid #9B9B9B;
    border-bottom: 1px solid #D8D8D8;
    border-right: 1px solid #D8D8D8;
  }

  .box_search select{
    -webkit-border-radius: 05px;
    -moz-border-radius: 05px;
    border-radius: 05px;
    border:none;
    width: auto;
    height:25px;
    border: 1px solid #9B9B9B;
    border-bottom: 1px solid #D8D8D8;
    border-right: 1px solid #D8D8D8;
    float: left;
    }
  .box_search p{
    font-size:30px;
    color:#fff;
    text-shadow: 0.05em 0.05em 0.05em #333
    }
  .box_search h3{
    font-size:20px;
    color:#003580;
    text-shadow: 0.05em 0.05em 0.05em #fff
  }

  #submitButton{
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border:none;
    width:100px;
    height:35px;
    color:#fff;
    font-size:20px;
    border:#FFF 3px solid;
    background-color:#0896ff;
    text-shadow: 0.05em 0.05em 0.05em #333;
    float:right;
  }

  #submitButton:hover{
    background-color:#cccccc;
  }
</style>
<script>
  function valiadateCheckInCheckOut(){
    var checkInDay  = document.getElementsByName("startDay")[0];
    var checkOutDay = document.getElementsByName("endDay")[0];
    var checkInMonth  = document.getElementsByName("startMonth")[0];
    var checkOutMonth = document.getElementsByName("endMonth")[0];
    var checkInYear  = document.getElementsByName("startYear")[0];
    var checkOutYear = document.getElementsByName("endYear")[0];

    var checkInDayValue  = eval(checkInDay.value);
    var checkOutDayValue = eval(checkOutDay.value);
    var checkInMonthValue  = eval(checkInMonth.value);
    var checkOutMonthValue = eval(checkOutMonth.value);
    var checkInYearValue  = eval(checkInYear.value);
    var checkOutYearValue = eval(checkOutYear.value);

    //alert(checkInMonthValue+":"+checkOutMonthValue);
    if (checkInDayValue == checkOutDayValue && checkInMonthValue == checkOutMonthValue && checkInYearValue == checkOutYearValue ) {

         alert("Please select next night.");

        //document.getElementById('error-identificational').innerHTML = "* Identificational.";
        checkOutDay.style.borderStyle = "solid";
        checkOutDay.style.borderColor = "#FF0000";
        checkOutDay.style.borderWidth = "1px";
        checkOutDay.focus();
        return false;
    } else if (checkInDayValue > checkOutDayValue && checkInMonthValue == checkOutMonthValue && checkInYearValue == checkOutYearValue ) {

         alert("Please select checkout day more than checkin day.");

        //document.getElementById('error-identificational').innerHTML = "* Identificational.";
        checkOutDay.style.borderStyle = "solid";
        checkOutDay.style.borderColor = "#FF0000";
        checkOutDay.style.borderWidth = "1px";
        checkOutDay.focus();
        return false;
    } else if (checkInMonthValue > checkOutMonthValue && checkInYearValue == checkOutYearValue ) {

         alert("Please select checkout month more than checkin month.");

        //document.getElementById('error-identificational').innerHTML = "* Identificational.";
        checkOutMonth.style.borderStyle = "solid";
        checkOutMonth.style.borderColor = "#FF0000";
        checkOutMonth.style.borderWidth = "1px";
        checkOutMonth.focus();
        return false;
    } else if (checkInYearValue > checkOutYearValue ) {

         alert("Please select checkout year more than checkin year.");

        //document.getElementById('error-identificational').innerHTML = "* Identificational.";
        checkOutYear.style.borderStyle = "solid";
        checkOutYear.style.borderColor = "#FF0000";
        checkOutYear.style.borderWidth = "1px";
        checkOutYear.focus();
        return false;
    }  else {
      checkOutDay.style.borderStyle = "solid";
      checkOutDay.style.borderColor = "#00CC00";
      checkOutDay.style.borderWidth = "1px";
      //document.getElementById('error-country').innerHTML = "<IMG SRC='modules/Booking/pnimages/right.gif' WIDTH='10' HEIGHT='10'>";
    }
  }
</script>
<div class="box_search">
<h3><!--[pnml name="_POBPORTAL_USER_SEARCH_HOTEL_IN_PHUKET"]--></h3>
<FORM METHOD=POST ACTION="<!--[pnmodurl modname='POBPortal' type='search' func='searchResult']-->">
  <TABLE width="100%">
    <TR>
      <TD colspan="4">
          <!--[pnml name='_POBPORTAL_USER_PLACE_NAME']--><br>
          <INPUT TYPE="text" 
                  class="search" 
                  NAME="form[search]" 
                  value="<!--[$form.search]-->" 
                  placeholder="<!--[pnml name='_POBPORTAL_USER_SEARCH_SUGGESSTION']-->"
           >
      </TD>
    </TR>
    <TR>
      <TD colspan="2"> <!--[pnml name='_POBPORTAL_USER_CHECK_IN_DATE']--></TD>
      <td colspan="2"> <!--[pnml name='_POBPORTAL_USER_CHECK_OUT_DATE']--></TD>
    </TR>
    <TR>
      <TD colspan="2"><!--[innova_html_select_date end_year=+1 field_order="DMY" prefix="start"]--></TD>
      <TD colspan="2"><!--[innova_html_select_date next_day=1 end_year=+1 field_order="DMY" prefix="end"]--></TD>
    </TR>
    <TR>
      <td colspan="4" rowspan="2">&nbsp;</TD>
    </TR>
    <TR>
      <td colspan="4" rowspan="2"></TD>
    </TR>
    <TR>
      <TD colspan="2">&nbsp;</TD>
      <td colspan="2"><button id="submitButton" type="submit" onclick="return valiadateCheckInCheckOut()"><!--[pnml name="_POBPORTAL_USER_SAERCH_BUTTON"]--></button>  </TD>
    </TR>
  </TABLE>
</FORM>
</div>